<template>
    <div>
        <div>
            <sea-steps :titles="titles" :step="step"></sea-steps>
            <button class="btn-default sea-button" @click="back">Back</button>
            <button class="btn-default sea-button" @click="next">Next</button>

            <blockquote>
                <span class="block">极简风格的步骤条，如果需要复杂设计，可以使用 element 的组件</span>
            </blockquote>
        </div>
        <div>
            <sea-breadcrumb :titles="titles"></sea-breadcrumb>
            <blockquote>
                <span class="block">面包屑去除了 icon 的设计，加上 icon，看着乱乱的</span>
            </blockquote>
        </div>
        <div>
            <ul class="sea-steps ">
                <li class="sea-steps-item">
                    <strong>步骤 1</strong>
                    <span class="sea-steps-separator text-regular">/</span>
                </li>
                <li class="sea-steps-item">
                    <strong>步骤 2</strong>
                    <span class="sea-steps-separator text-regular">/</span>
                </li>
                <li class="sea-steps-item">
                    <strong>步骤 3</strong>
                    <span class="sea-steps-separator text-regular">/</span>
                </li>
            </ul>
            <blockquote>
                <span class="block">面包屑逻辑简单，推荐直接使用 html + css 实现</span>
            </blockquote>
        </div>

        <div>
            <ul class="sea-breadcrumb disabled-list-style inline-block margin">
                <li>步骤 1</li>
                <li>步骤 2</li>
            </ul>
            <blockquote>
                <span class="block">逻辑更加简单的面包屑</span>
            </blockquote>
        </div>
    </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import Layers from "@/lang/layers/index";


const titles = reactive(['步骤1', '步骤2', "步骤3", "步骤4"])

const step = ref(1);

const back = () => {
    if (step.value > 0) {
        step.value--;
    }
}

const next = () => {
    const len = titles.valueOf().length - 1
    if (step.value < len) {
        // next step
        step.value++;
        Layers.msg(titles.valueOf()[step.value]);
    } else {
        // complete
        Layers.warn('complete!');
    }
}


</script>

<style lang="scss" scoped>
</style>